<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" append-to-body width="750" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')">
		<el-steps :active="active" finish-status="process" simple class="steps">
			<el-step title="基础信息"/>
			<el-step title="应用配置"/>
			<el-step title="创建成功"/>
		</el-steps>
		<el-row v-if="active==0">
			<el-col :span="24">
				<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px">
					<el-form-item label="应用名称" prop="appName">
						<el-input v-model="form.appName" @blur="getPinYin"  maxlength="50" placeholder="请输入应用名称" />
					</el-form-item>
					<el-row>
						<el-col :span="16">
							<el-form-item label="应用图标" prop="appIcon" @click="selectIcon" style="cursor: pointer">
								<template #label>
									<div style="margin-top:2px">应用图标</div>
								</template>
								<el-input placeholder="请选择图标样式" v-model="form.appIcon" maxlength="50" readonly suffix-icon="el-icon-arrow-down"></el-input>
								<el-alert description="在选择好图标后，您还可以设置图标的颜色、背景色" type="warning" :closable="false" style="padding: 0px"/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-row style="justify-content: center;">
								<el-col :span="8" style="text-align: right;padding-right: 6px;">
									<div style="margin-top: 8px">图标样式</div>
								</el-col>
								<el-col :span="6" style="text-align: center;padding-right: 10px;">
									<jdIconSelect ref="iconSelect" v-model="form.appIcon" clearable></jdIconSelect>
									<div style="margin-top: 6px">图标</div>
								</el-col>
								<el-col :span="5" style="text-align: center;padding-right: 5px;">
									<el-color-picker v-model="form.iconColor" :predefine="predefineColors" style="margin-left: 5px"></el-color-picker>
									<div style="margin-top: 6px;color:#409EFF">颜色</div>
								</el-col>
								<el-col :span="5" style="text-align: center;">
									<el-color-picker v-model="form.backColor" :predefine="predefineColors" style="margin-left: 5px"></el-color-picker>
									<div style="margin-top: 6px;background: #409EFF;color: #FFF;">背景色</div>
								</el-col>
							</el-row>

						</el-col>
					</el-row>
					<el-form-item label="应用介绍" prop="describe">
						<el-input v-model="form.describe" maxlength="500" type="textarea" rows="5" show-word-limit placeholder="应用的一句话介绍" />
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row v-if="active==1">
			<el-col :span="24">
				<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px">
					<el-form-item label="应用包名" prop="appPackage">
						<el-input
							placeholder="应用的唯一标识，例如：com.jportal.app"
							v-model="form.appPackage"
							maxlength="50"
						>
							<template #prepend>
								<el-button>com.jportal.</el-button>
							</template>
							<template #append>
								<el-button>随机生成</el-button>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="所属部门" prop="deptId">
						<jd-cascader v-model="form.deptId" :apiObj="$API.system.dept.tree" :apiProps="{label:'label',value: 'id'}" style="width: 100%;" placeholder="请选择..."></jd-cascader>
					</el-form-item>
					<el-row>
						<el-col :span="12">
							<el-form-item label="应用职能" prop="appType">
								<jd-select v-model="form.appClassify" dict="sys_app_classification" dataType="String" defaultFirst=true filterable style="width: 100%;" placeholder="请选择..."></jd-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="数据存储" prop="database">
								<jd-select v-model="form.database" :apiObj="$API.app.dbConn.getConnects" defaultFirst=true :apiProps="{label:'connName',value: 'connId'}" style="width: 100%;" placeholder="请选择..."></jd-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="应用说明" prop="remark">
								<el-input v-model="form.remark" maxlength="1000" type="textarea" rows="5" show-word-limit placeholder="" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-col>
		</el-row>
		<el-row v-if="active==2" style="justify-content: center">
			<el-result
				icon="success"
				title="恭喜，应用创建成功"
				sub-title="下面请尽情发挥您的聪明大脑，开启您的开发之旅吧。"
			>
				<template #extra>
					<el-button @click="appDocs">帮助手册</el-button>
					<el-button type="primary" @click="designApp">应用中心</el-button>
				</template>
			</el-result>
		</el-row>

		<template #footer>
			<el-button :disabled="active <= 0" @click="handlePrevStep" v-if="active == 1">上一步</el-button>
			<el-button :disabled="active >= 1" @click="handleNextStep" v-if="active <= 0">下一步</el-button>
			<el-button type="primary" :loading="btnLoading" :disabled="active < 1" @click="createApp()" v-if="active == 1">确认创建</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		props: {
			interfaceId: { type: Number, default: 0 },
			group:null,
		},
		data() {
			return {
				appCode: "",
				mode: "add",
				titleMap: {
					add: '创建新应用',
					edit: '编辑应用',
					show: '查看'
				},
				visible: false,
				active: 0,
				predefineColors: [
					'#409EFF',
					'#ff4500',
					'#ff8c00',
					'#ffd700',
					'#67C23A',
					'#00ced1',
					'#409EFF',
					'#c71585'
				],
				//表单数据
				form: {
					appId: "",
					deptId: "",
					icon: "",
					iconColor: "#FFFFFF",
					backColor: "#409EFF",
					appDatabase: "",
					appName: "",
					appIcon: "",
				},
				//验证规则
				rules: {
					appName:[
						{required: true, message: ''}
					],
					appIcon:[
						{required: true, message: ''}
					],
					appPackage:[
						{required: true, message: ''}
					],
					dept:[
						{required: true, message: ''}
					],
					describe:[
						{required: true, message: ''}
					],
				}
			}
		},
		mounted() {

		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				this.requestParams = [];
				return this
			},
			// 选择图标
			selectIcon(){
				this.$refs["iconSelect"].open();
			},
			// 获取应用拼音
			async getPinYin(){
				if (this.form.appName == ""){
					return;
				}
				var res = await this.$API.app.appStore.getPhonetic.get(this.form.appName)
				if (res.code == 200){
					this.form.appPackage = res.data;
				}
			},
			handlePrevStep(){
				this.active -= 1;
      			this.$refs.dialogForm.clearValidate();
			},
			handleNextStep(){
				this.$refs.dialogForm.validate((valid) => {
					if (valid) {
						if (this.active < 1){
							this.active += 1;
						}
					}
				});
			},
			// 创建应用
			createApp(){
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						if (Array.isArray(this.form.deptId)){
							var depts = this.form.deptId;
							this.form.deptId = depts[depts.length - 1]
						}

						this.btnLoading = true;
						var res = {};
						res = await this.$API.app.appStore.addApp.post(this.form);
						if(res.code == 200){
							this.$emit('success', this.form, this.mode)
							this.btnLoading = false;
							this.active = 2;
							this.appCode = res.data.appCode;
						}else{
							this.$alert(res.msg, "提示", {type: 'error'})
						}
					}
				})
			},
			appDocs(){
				this.$router.push({ path: "/i/m/2075" });
			},
			designApp(){
				this.$router.push({
					path: "/app/store/design",
					query: {
						appId: this.appCode
					}
				});
			}
		}
	}
</script>

<style>
.el-dialog__body{
	padding: 20px;
	padding-right: 30px;
}
.steps{
	margin-bottom: 30px;
}
.el-collapse-item__header{
	font-weight: bolder;
	font-size: 16px;
	margin-top: 10px;
}
</style>
